<template>
    <view class="diy-form-radio dir-top-nowrap" :style="cRadioStyle">
        <view class="diy-form-label" :class="{'cross-center':data.mode == 2}" :style="cTitleStyle">
            <view>{{data.title}}
                <text v-if="data.is_required == '1' && data.title">*</text>
            </view>
        </view>
        <view class="dir-left-wrap corss-center option-list" :style="{'margin-top': -data.marginBottom + 'rpx','margin-left': -data.inputPadding + 'rpx',}">
            <view @click="chooseValue(index)" v-for="(item,index) in data.list" :key="index" class="option-item" :class="data.mode == 4 ? 'dir-top-nowrap main-center' : 'dir-left-nowrap cross-center'" :style="optionStyle">
                <view v-if="data.mode < 3 && mode == 'radio'" class="radio main-center cross-center" :style="{'border-color': item.value ? data.active_color : data.inactive_color,'background-color': item.value ? data.active_color : data.inactive_color}">
                    <view v-if="item.value" class="radio-active"></view>
                </view>
                <view v-if="(data.mode == 1 || data.mode == 2 || (data.mode == 4 && item.value)) && mode == 'select'" class="radio select main-center cross-center" :class="{'position' : data.mode == 4,'show': item.value}" :style="{'border-color': item.value ? data.active_color : data.inactive_color, 'background-color': item.value ? data.active_color : data.inactive_color}">
                    <image v-if="item.value" class="select-icon" src="/static/image/icon/diy-form-select.png"></image>
                </view>
                <image v-if="data.mode == 4" class="option-img" :style="{'height': data.height + 'rpx','width': data.height + 'rpx', 'border-radius': data.radius + 'rpx','border-color': item.value ? data.active_color : data.inactive_color}" :src="item.img"></image>
                <view :class="{'matrix':data.mode == 2,'tag-item': data.mode == 3,'img-item t-omit' : data.mode == 4}" :style="[textStyle,{'background-color': data.mode == 3 ? item.value ? data.active_color : data.inactive_color : data.mode == 2 ? data.fill_color : '','color': data.mode == 3 && item.value ? data.active_text_color : data.text_color}]">{{item.label}}</view>
            </view>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        name: 'diy-form-radio',
        data() {
            return {
                data: {
                    is_required: '0',
                    title: '',
                    mode: 1,
                    list: [],
                    height: 84,
                    inputPadding: 48,
                    marginBottom: 48,
                    margin: 0,
                    radius: 10,
                    title_color: '#242424',
                    text_color: '#242424',
                    active_color: '#FF4544',
                    fill_color: '#F1F5F7',
                    inactive_color: '#E5E7EC',
                    bg_color: '#FFFFFF'
                }
            }
        },
        props: {
            index: [Number, String],
            mode: {
                type: String,
                default: 'radio'
            },
            newList: Array,
            value: {
                type: Object
            }
        },
        computed: {
            cRadioStyle() {
                let style = `background-color:${this.data.bg_color};width:100%;`;
                if (this.data.mode === 1) {
                    style += `padding: 20rpx ${this.data.margin}rpx;`;
                }else if (this.data.mode === 2) {
                    style += `padding: 20rpx ${this.data.margin}rpx 30rpx;`;
                }else {
                    style += `padding: 24rpx ${this.data.margin}rpx 32rpx;`;
                }
                return style;
            },
            cTitleStyle() {
                let style = `color:${this.data.title_color};`;
                if (this.data.mode < 3) {
                    style += `margin-bottom: 24rpx;`
                }else {
                    style += `margin-bottom: 20rpx;`
                }
                return style;
            },
            textStyle() {
                let style = {}
                if(this.data.mode == 2) {
                    style.width = 650 - this.data.margin + 'rpx'
                }
                if(this.data.mode == 4) {
                    style.width = `${this.data.height}rpx`
                }else {
                    style.height = `84rpx`
                    style['line-height'] =`84rpx`
                }
                if(this.data.mode == 2 || this.data.mode == 3) {
                    style['border-radius'] = `${this.data.radius}rpx`
                }
                return style;
            },
            optionStyle() {
                let style = `margin-left:${this.data.inputPadding}rpx;margin-top:${this.data.marginBottom}rpx;`;
                return style;
            }
        },
        created() {
            this.data = this.value
            this.data.list.forEach((_,index) => {
                if(_.default == 1) this.chooseValue(index)
            })
        },
        watch: {
            'goodsForm.hideIds': {
                handler(newVal) {
                    if(newVal.indexOf(this.data.key) !== -1){
                        for(let i in this.data.list) {
                          //  this.data.list[i].value = false;
                        }
                    }
                }
            },
            newList: {
                handler(newVal) {
                    this.data.list = newVal
                }
            }
        },
        methods: {
            updateNewList(newVal) {
                this.data.list = newVal
            },
            chooseValue(index) {
                if(this.mode == 'radio') {
                    for(let i in this.data.list) {
                        this.data.list[i].value = false;
                        this.data.list[i].value = index == +i ? true : false
                    }
                }else {
                    let number = 0;
                    for(let item of this.data.list) {
                        if(item.value) {
                            number++;
                        }
                    }
                    if(number == this.data.max && !this.data.list[index].value) {
                        uni.showToast({title: '最多选择' + number + '项', icon: 'none'});
                        return false;
                    }
                    this.data.list[index].value = !this.data.list[index].value;
                    this.$forceUpdate();
                }
                let chooseValue = [];
                for(let item of this.data.list) {
                    if(item.value) {
                        chooseValue.push(item.label)
                    }
                }
                if(this.mode == 'radio' && chooseValue.length == 1) {
                    chooseValue = chooseValue[0]
                }
                this.$emit('updateValue', {
                    index: this.index,
                    value: chooseValue,
                });
            }
        },
        inject: ['goodsForm'],
    }
</script>

<style scoped lang="scss">
    .diy-form-radio {
        font-size: 30rpx;
        .diy-form-label {
            flex-shrink: 0;
            font-size: 30rpx;
            view {
                position: relative;
                display: inline-block;
                text {
                    color: #FF4544;
                    position: absolute;
                    right: -16rpx;
                    top: 0;
                }
            }
        }
        .option-list {
            .option-item {
                position: relative;
                .matrix {
                    padding-left: 20rpx;
                    display: inline-block;
                }
                .tag-item {
                    padding: 0 60rpx;
                }
                .img-item {
                    text-align: center;
                    margin-top: 20rpx;
                }
                .option-img {
                    border: 2rpx solid;
                }
                .radio {
                    width: 32rpx;
                    height: 32rpx;
                    border-radius: 50%;
                    border: 2rpx solid;
                    margin-right: 20rpx;
                    &.select {
                        border-radius: 6rpx;
                    }
                    &.position {
                        position: absolute;
                        left: 18rpx;
                        top: 14rpx;
                        z-index: 100;
                    }
                    .radio-active {
                        width: 12rpx;
                        background-color: #fff;
                        height: 12rpx;
                        border-radius: 50%;
                    }
                    .select-icon {
                        width: 20rpx;
                        height: 20rpx;
                    }
                }
            }
        }
    }
</style>
